<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<!-- 引入easyui 的主题样式  和  easyui 提供的图标样式 -->
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/themes/bootstrap/easyui.css" />
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/themes/icon.css" />
<!-- 引入jquery 和  easyui.js   中文设置js-->
<script type="text/javascript"
	src="${pageContext.request.contextPath}/js/jquery-1.9.1.js"></script>
<script type="text/javascript"
	src="${pageContext.request.contextPath}/js/jquery.easyui.min.js"></script>
<script type="text/javascript"
	src="${pageContext.request.contextPath}/js/easyui-lang-zh_CN.js"></script>
</head>
<script type="text/javascript">
	$(function() {
		//展示所有员工
		$('#dg').datagrid({
		    url:'showemployees',    
		    columns:[[
		        {field:'check',width:40,checkbox:true},
		        {field:'eid',title:'员工编号',width:60},    
		        {field:'ename',title:'姓名',width:60},
		        {field:'eage',title:'年龄',width:40},    
		        {field:'esex',title:'性别',width:40},
		        {field:'eidcard',title:'身份证号码',width:150},    
		        {field:'enation',title:'民族',width:40},
		        {field:'eaddress',title:'家庭住址',width:100},    
		        {field:'eeducation',title:'学历',width:80},
		        {field:'eintime',title:'入职时间',width:80},    
		        {field:'dname',title:'部门',width:60},
		        {field:'eposition',title:'职位',width:60},    		        
		    ]],
		    pagination:true,
		    striped:true,
		    toolbar: [{
		    	text:'添加新员工',
	    		iconCls: 'icon-add',
	    		handler: function(){
	    			$('#dd').window('open');
	    		}
	    	},'--',{
	    		text:'删除',
	    		iconCls: 'icon-remove',
	    		handler: function(){
	    			var sels=$('#dg').datagrid('getSelections');
	    			if(sels!=0){
		    			$.messager.confirm('确认','您确认想要删除记录吗？',function(r){    
		    			    if (r){    
		    			    	var dels=[];
		    	    			$.each(sels,function(i,n){
		    	    				dels.push(n.eid)
		    	    			})
		    	    			$.ajax({
		    	    				url:'deleteEmpls',
		    	    				type:'post',
		    	    				traditional: true,
		    	    				data:{'dels':dels},
		    	    				dataType:'text',
		    	    				success:function(data){
		    	    					if(data=='true'){
		    	    						$.messager.alert('提示','删除成功');
		    	    						$('#dg').datagrid('reload');
		    	    					}else{
		    	    						$.messager.alert('提示','删除失败');
		    	    					}
		    	    				}
		    	    			})   
		    			    }    
		    			});  	    				    				
	    			}else{
	    				$.messager.alert('提示','请选择记录删除');
	    			}
	    		}
	    	},'--',{
	    		text:'编辑',
	    		iconCls: 'icon-edit',
	    		handler:function(){
	    			var sels=$('#dg').datagrid('getSelections');
	    			if(sels.length==1){
	    				$('#edit').window('open');
	    				var eid=sels[0].eid;
	    				$('#mname').textbox('setText',sels[0].ename);
	    				$('#mage').textbox('setText',sels[0].eage);
	    				$('#msex').textbox('setText',sels[0].esex);
	    				$('#midcard').textbox('setText',sels[0].eidcard);
	    				$('#mnation').textbox('setText',sels[0].enation);
	    				$('#meducation').textbox('setText',sels[0].eeducation);
	    				$('#mdizi').textbox('setText',sels[0].eaddress);
	    				$('#mphone').textbox('setText',sels[0].ephone);
	    				$('#mintime').textbox('setText',sels[0].eintime);
	    				$('#mdname').textbox('setText',sels[0].dname);
	    				$('#mposition').textbox('setText',sels[0].eposition);
	    				$('#mff').form({    
	    				    url:'editempldtp',    
	    				    onSubmit: function(param){    
	    				    	param.mname=$('#mname').textbox('getText');
	    				    	param.mage=$('#mage').textbox('getText');
	    				    	param.meducation=$('#meducation').textbox('getText');
	    				    	param.mdizi=$('#mdizi').textbox('getText');
	    				    	param.mphone=$('#mphone').textbox('getText');
	    				    	param.eid=eid;
	    				    },    
	    				    success:function(data){ 
	    				    	if(data=='true'){
	    				    		$.messager.alert('提示','修改成功');
	    				    		$('#mff').form('clear');
	    				    		$('#edit').window('close');
	    				    		$('#dg').datagrid('reload');
	    				    	}else{
	    				    		$.messager.alert('提示','修改失败');
	    				    	}
	    				    }    
	    				});
	    			}else{
	    				$.messager.alert('提示','请选择一个进行编辑');
	    			}
	    		}
	    	}]
		    
		});
		//配置员工入职表
		$('#dd').dialog({    
		    title: '员工入职表',    
		    width: 600,    
		    height: 400,    
		    closed: true,    
		    cache: false,       
		    modal: true,
		});
		//配置员工入职表保存提交按钮
		$('#save').bind('click', function(){    
			//配置form表单提交
			$('#ff').form({    
			    url:'addEmployee',
			    onSubmit: function(){     
			    	//阻止表单提交 
					return $(this).form('enableValidation').form('validate');
			    },    
			    success:function(data){  
			    	var eid=data;
			    	var id=eval("("+eid+")");
			    	$.messager.alert('注册成功','员工id：   '+id.eid);
			    	$('#ff').form('clear');
			    	$('#dd').window('close');
			    }    
			});
			$('#ff').submit(); 
		});
		//配置员工入职表取消按钮
		$('#cancle').bind('click', function(){
			$('#ff').form('clear');
			$('#dd').window('close');   
	    });    

		//配置部门下拉框
		$('#did').combobox({
			url : 'selectdid',
			valueField : 'id',
			textField : 'text',
			panelHeight : 'auto',
			width:100,	
		});
		//form表单校验
		$.extend($.fn.validatebox.defaults.rules, {    
		    mobile : {// value值为文本框中的值
                validator : function(value) {
                    var reg = /^1[3|4|5|8|9]\d{9}$/;
                    return reg.test(value);
                },
                message : '输入手机号码格式不准确.'
            },
            idcard : {// 验证身份证 
                validator : function(value) { 
                    return /^\d{15}(\d{2}[A-Za-z0-9])?$/i.test(value); 
                }, 
                message : '身份证号码格式不正确' 
            },
            age : {// 验证年龄
                validator : function(value) { 
                    return /^(?:[1-9][0-9]?|1[01][0-9]|120)$/i.test(value); 
                }, 
                message : '年龄必须是0到120之间的整数' 
            }, 
            name : {// 验证姓名，可以是中文或英文 
                validator : function(value) { 
                    return /^[\Α-\￥]+$/i.test(value)|/^\w+[\w\s]+\w+$/i.test(value); 
                }, 
                message : '请输入姓名' 
        	},
        	date : {
                validator : function(value) {              
        		//格式yyyy-MM-dd或yyyy-M-d
                    return /^(?:(?!0000)[0-9]{4}([-]?)(?:(?:0?[1-9]|1[0-2])\1(?:0?[1-9]|1[0-9]|2[0-8])|(?:0?[13-9]|1[0-2])\1(?:29|30)|(?:0?[13578]|1[02])\1(?:31))|(?:[0-9]{2}(?:0[48]|[2468][048]|[13579][26])|(?:0[48]|[2468][048]|[13579][26])00)([-]?)0?2\2(?:29))$/i.test(value); 
                },
                message : '请输入合适的日期格式'
            },
		}); 
		//配置搜索框
		$('#ss').searchbox({
			prompt:'输入姓名查询',
		    searcher:function(name){
		    	$('#dg').datagrid('load', {    
		    	    name:name,
		    	});     	
		    },
		});
		//配置文件框
		$('#fb').filebox({    
		    buttonText: '批量导入', 
		    buttonAlign: 'right',
		    
		})
		//配置编辑员工信息窗口
		$('#edit').dialog({    
	    title: '修改员工信息表',    
	    width: 600,    
	    height: 450,    
	    closed: true,    
	    cache: false,       
	    modal: true   
	});
		//配置编辑入职表取消按钮
		$('#can').bind('click', function(){
			$('#mff').form('clear');
			$('#edit').window('close');   
	    });
		//配置编辑提交按钮
		$('#sav').bind('click', function(){    
	        $('#mff').submit();
	    });
		

	})
</script>
<body>
<!-- 员工管理页面 -->
	<!-- 搜索框 -->
	<div style="margin-left: 10px">
		<input id="ss" class="easyui-searchbox" style="width:300px"></input> 	
	</div>
	<div style="margin-left: 10px;margin-top: 3px">
		<input id="fb" type="text" style="width:300px;">
	</div>
	<div>
		<table id="dg"></table>
		<!-- 员工入职表 -->
		<div id="dd">
			<form id="ff" method="post">
				<div style="margin-left: 35px;margin-top: 20px;">      
					姓名：<input id='ename' name='ename' class="easyui-validatebox" type="text" data-options="required:true,validType:'name'" />   
					年龄：<input id='eage' name='eage'  class="easyui-validatebox" type="text" style="width: 50px" data-options="required:true,validType:'age'"/>
					性别:<select id="esex" name="esex" class="easyui-validatebox" data-options="editable:false,panelHeight:'auto'" style="width:50px;">   
					    <option value="男">男</option>   
					    <option>女</option>      
					</select>
				</div>  					   
			    <div style="margin-top: 10px;margin-left: 10px">
			    	身份证号：<input id='eidcard' name='eidcard' class="easyui-validatebox" type="text" data-options="required:true,validType:'idcard'"/>
			    	民族:<select id="enation" name="enation" class="easyui-combobox" style="width:70px;" data-options="panelHeight:'auto',editable:false">   
					    <option value="汉">汉族</option>   
					    <option value="回族">回族</option>
					     <option value="蒙古族">蒙古族</option>  
					    <option value="藏族">藏族</option>  
					    <option value="维吾尔族">维吾尔族</option>  
					    <option value="苗族">苗族</option>  
					    <option value="壮族">壮族</option>   
					    <option value="朝鲜族">朝鲜族</option>  
					    <option value="其它">其它</option>        
					</select>
					学历:<select id="eeducation" name="eeducation" class="easyui-combobox" style="width:100px;"data-options="panelHeight:'auto',editable:false">   
					    <option value="本科">本科</option>   
					    <option>博士研究生</option>
					    <option>硕士研究生</option>   
					    <option>专科</option>   
					    <option>高中</option>   
					    <option>中专</option>
					    <option>其它</option>         
					</select>  		   
	 			</div>
	 			<div style="margin-top: 10px;margin-left: 35px">
	 				地址：<input id='eaddress' name='eaddress' class="easyui-validatebox" type="text" data-options="required:true" style="width:400px"/>
	 			</div>
	 			<div style="margin-top: 10px;margin-left: 10px">
	 				手机号码：<input id='ephone' name='ephone' class="easyui-validatebox" type="text" data-options="required:true,validType:'mobile'"/>
	 			</div>
	 			<div style="margin-top: 10px;margin-left: 10px">	 			
	 				入职时间：<input id='eintime' name='eintime' class="easyui-datebox" style="width:150px" data-options="required:true,validType:'date'" >	 				
	 			</div>
	 			<div style="margin-top: 10px;margin-left: 35px">
	 				部门：<input id="did" name="did" value="请选择" class="easyui-combobox" data-options="editable:false">  
	 				职务：<input id='eposition' name='eposition' class="easyui-validatebox" type="text" data-options="required:true"/> 
	 			</div>
	 			<div style="margin-top: 10px;margin-left: 35px">
	 				备注：<br>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
	 				<textarea id='eremark' name='eremark' rows="4" cols="50"></textarea>
	 			</div>
	 			<div id="bb" style="margin-top: 10px;margin-left: 180px">
					<a id="save" class="easyui-linkbutton">保存</a>
					&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
					<a id='cancle' class="easyui-linkbutton">关闭</a>
				</div>
	 		</div>					 			 	
	 	</form>				
	</div>
	<!-- 修改窗口 -->
<form id="mff" method="post">  
	<div id="edit" >
     	<div style="margin-left: 35px;margin-top: 20px;">      
			姓名：<input id='mname' name='mname' class="easyui-textbox" type="text" data-options="required:true,validType:'name'" />   
			年龄：<input id='mage' name='mage'  class="easyui-textbox" type="text" style="width: 50px" data-options="required:true,validType:'age'"/>
			性别:<input id="msex" name="msex" class="easyui-textbox" data-options="editable:false" style="width:50px;">   
		</div>
		<div style="margin-top: 10px;margin-left: 10px">
			身份证号：<input id='midcard' name='midcard' class="easyui-textbox" type="text" data-options="validType:'idcard',readonly:true"/>
			民族:<input id="mnation" name="mnation" class="easyui-textbox" style="width:70px;" data-options="readonly:true">   
			学历:<select id="meducation" name="meducation" class="easyui-combobox" style="width:100px;"data-options="panelHeight:'auto',editable:false">   
				<option value="本科">本科</option>   
				<option>博士研究生</option>
				<option>硕士研究生</option>   
				<option>专科</option>   
				<option>高中</option>   
				<option>中专</option>
				<option>其它</option>         
			</select>  		   
	 	</div>
	 	<div style="margin-top: 10px;margin-left: 35px">
	 				地址：<input id='mdizi' name='mdizi' class="easyui-textbox" type="text" data-options="required:true" style="width:400px"/>
	 			</div>
	 			<div style="margin-top: 10px;margin-left: 10px">
	 				手机号码：<input id='mphone' name='mphone' class="easyui-textbox" type="text" data-options="required:true,validType:'mobile'"/>
	 			</div>
	 			<div style="margin-top: 10px;margin-left: 10px">	 			
	 				入职时间：<input id='mintime' name='mintime' class="easyui-datebox" style="width:150px" data-options="required:true,validType:'date',readonly:true" >	 				
	 			</div>
	 			<div style="margin-top: 10px;margin-left: 35px">
	 				部门：<input id="mdname" name="mdname" class="easyui-textbox" data-options="editable:false,readonly:true">  
	 				职务：<input id='mposition' name='mposition' class="easyui-textbox" type="text" data-options="required:true,readonly:true"/> 
	 			</div>
	 			<!-- <div style="margin-top: 10px;margin-left: 35px">
	 				备注：<br>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
	 				<textarea id='eremark' name='eremark' rows="4" cols="50"></textarea>
	 			</div> -->
	 			<br>
	 			<br>
	 			<div style="margin-top: 10px;margin-left: 180px">
					<a id="sav" class="easyui-linkbutton">提交</a>
					&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
					<a id='can' class="easyui-linkbutton">取消</a>
				</div>
	</div>
</form> 
</body>
</html>